<!doctype html>
<html>
 <head> 
  <meta charset="utf-8"> 
  <title>dropMenu下拉菜单组件 dropMenu - layui 第三方组件平台</title> 
  <meta name="renderer" content="webkit"> 
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 
  <meta name="description" content="基于LayUI的下拉菜单组件，可以和layui.table组合使用"> 
  <link rel="stylesheet" href="/t/font_24081_60slu02pimt.css">
  <link rel="stylesheet" href="/layui/dist/css/layui.css">
  <link rel="stylesheet" href="/static/css/fly/global.css" charset="utf-8">
  <link rel="stylesheet" href="/static/css/global.css" charset="utf-8">
  <link rel="stylesheet" href="/static/css/global.css" charset="utf-8">
 </head>
 <body>
  <div class="layui-header header header-extends" style="background-color: #24262F;"> 
   <div class="layui-container"> <a class="logo" href="https://layui.itmtr.cn/"> <img src="/static/images/layui/logo.png" alt="layui"> </a> 
    <div class="layui-form component" lay-filter="LAY-site-header-component"></div> 
    <ul class="layui-nav"> 
     <li class="layui-nav-item layui-hide-xs"> <a href="//layui.itmtr.cn/">框架</a> </li> 
     <li class="layui-nav-item layui-hide-xs layui-this"> <a href="/extend/index.html">扩展</a> </li> 
     <li class="layui-nav-item"> <a href="javascript:;">周边</a> 
      <dl class="layui-nav-child layui-nav-child-c"> 
       <dd lay-unselect> <a href="//layui.itmtr.cn/alone.html" target="_blank">独立组件</a> 
       </dd> 
       <dd class="layui-hide-sm layui-show-xs" lay-unselect> <a href="/extend/index.html">扩展组件</a> 
        <hr> 
       </dd> 
      </dl> </li> 
    </ul> 
   </div>
  </div><!--[if lt IE 9]>  <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>  <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script><![endif]--> 
  <div class="fly-extend-banner fly-extend-banner-sm"> 
   <div class="layui-carousel" id="FLY-extend-banner" data-height="200px"> 
    <div carousel-item> 
     <div style="background-image: url(/upload/2018_8/168_1535373858670_8825.jpg)">
      <div style="background: rgba(0,0,0,.6)"></div> 
     </div> 
    </div> 
   </div> 
   <h1 class="fly-extend-banner-title">layui 第三方组件平台</h1> 
   <div class="fly-extend-banner-release"> <a href="/extend/index.html" class="layui-btn layui-btn-lg">返回首页</a>
   </div> 
  </div>
  <div class="fly-extend-detail layui-card"> 
   <div class="layui-container"> 
    <div class="fly-extend-list-header"> 
     <h1 class="fly-extend-title layui-elip"> <a>dropMenu下拉菜单组件</a> <span class="layui-badge layui-bg-green layui-hide-xs">dropMenu</span> </h1> 
     <div class="fly-extend-list-info"> <a href="/u/45030216/index.html" target="_blank" class="fly-extend-list-user" title="发布者"> <cite class="layui-hide-xs">Je**8</cite> <img src="/g" alt="Je**8"> </a> 
     </div> 
    </div> 
    <blockquote class="fly-extend-list-desc layui-elem-quote"> 
     <p>基于LayUI的下拉菜单组件，可以和layui.table组合使用</p> 
    </blockquote> 
    <div class="fly-extend-list-bottom"> <span class="layui-inline">更新：2021-1-11 </span> <span class="layui-inline">创建：2021-1-15 </span> 
     <div class="layui-btn-container layui-extend-doc-edit"> 
     </div> 
    </div> 
   </div>
  </div>
  <div class="layui-container"> 
   <div class="layui-row layui-col-space20"> 
    <div class="layui-col-sm3 layui-col-md2"> 
     <div class="layui-card"> 
      <ul class="fly-extend-doc-nav" lay-filter="extend-doc-nav"> 
       <li class="layui-this" lay-id="doc"> <a href="javascript:;"><i class="iconfont icon-wendang"></i> 文档</a> </li> 
       <li lay-id="download"> <a href="javascript:;"><i class="iconfont icon-xiazai"></i> 下载</a> </li> 
      </ul> 
     </div> 
    </div> 
    <div class="layui-col-sm9 layui-col-md10"> 
     <div class="layui-card fly-extend-doc layui-show"> 
      <div class="layui-card-header"> 
       <h3 class="layui-inline layui-this">文档</h3> 
      </div> 
      <div class="layui-card-body detail-body photos layui-text">
        安装教程
       <br>
       <pre>layui.config({<br>    base: '/js/', //拓展模块的根目录<br>})<br>.extend({<br>    dropMenu: '/dropMenu/dropMenu'<br>});</pre>使用说明
       <br>
       <pre>&lt;input type='button' class='layui-btn rowmoreBtn layui-icon layui-icon-more' value="更多"/&gt;<br><br>layui.dropMenu.render({<br>        type:0, //默认0，单击和鼠标经过时都生效，1点击时，2鼠标经过时（非必填）<br>	ele:".rowmoreBtn", //$(".rowmoreBtn")<br>	width:"120px", //菜单宽度（非必填）<br>        css:{"background":"red"}, //菜单样式（非必填）<br>        location:"c", //下拉菜单依靠位置，c居中、l左、r右（非必填）<br>        align: "c", //菜单内容文本对齐方式，c居中、l左、r右（非必填）<br>         //菜单数据，isShow是否显示，可配合权限来显示<br>	data:[<br>		{title:'选项1', icon:'layui-icon-set', event:'more1', isShow:true},<br>		{title:'选项2', icon:'layui-icon-notice', event:'more2'},<br>		{title:'选项3', icon:'layui-icon-search', event:'more3'},<br>		{title:'选项1', icon:'layui-icon-friends', event:'more1'},<br>		{title:'选项2', icon:'layui-icon-console', event:'more2'},<br>		{title:'选项3', icon:'layui-icon-app', event:'more3'},<br>		{title:'选项1', icon:'layui-icon-home', event:'more1'},<br>		{title:'选项2', event:'more2'},<br>		{title:'选项3', icon:'layui-icon-face-smile', event:'more3', isShow:false}<br>	],<br>        //触发的事件（非必填）<br>	event:{<br>		more1: function(){<br>		  alert('触发了事件1');<br>		},<br>		more2: function(){<br>		  alert('触发了事件2');<br>		},<br>		more3: function(){<br>		  alert('触发了事件3');<br>		}<br>	},<br>    done:function(dropM){ } //菜单渲染完成后触发事件，dropM下拉菜单对象<br>});<br><br>//事件可以单独用util.event来处理<br>  layui.util.event('lay-event', {<br>    more1: function(){<br>      alert('触发了事件1');<br>    },<br>    more2: function(){<br>      alert('触发了事件2');<br>    },<br>    more3: function(){<br>      alert('触发了事件3');<br>    }<br>  });<br><br>//事件可以使用table.on('tool')工具条事件来处理<br>   layui.table.on(`tool(mytable)`, function(obj){ <br>        var layEvent= obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）<br>        var row = obj.data; //获得当前行数据<br>        var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）<br>        if(layEvent === 'more1'){<br>            alert('触发了事件1');<br>        } <br>        else if(layEvent === 'more2'){<br>            alert('触发了事件2');<br>        }<br>   });<br><br>//跟layui.table结合，用lay-events标签动态显示菜单内容<br> &lt;!-- 行操作栏 --&gt;<br> &lt;script type="text/html" id="rowtool"&gt;<br>    &lt;div class='layui-inline'&gt;<br>      &lt;input type='button' class='layui-btn' value="编辑" lay-event="edit"/&gt;<br>    &lt;/div&gt;<br>    {{#  if(d.is_canDel){ }}<br>        &lt;input type='button' class='layui-btn layui-btn-xs layui-btn-primary rowmoreBtn' value='更多' lay-events="viewinfo,delete"/&gt;<br>    {{#  } else { }}<br>        &lt;input type='button' class='layui-btn layui-btn-xs layui-btn-primary rowmoreBtn' value='更多' lay-events="neworder,recycle"/&gt;<br>    {{#  } }}<br> &lt;/script&gt;<br><br>layui.table.render({<br>    elem: '#demo',<br>    url: '/demo/table/user/',<br>    page: true,<br>    cols: [[        <br>        { field: 'button', title: '操作', align:'center', width: "110", fixed: true, toolbar: '#rowtool' },<br>        { field: 'id', title: 'ID', align: 'center', width: 120},<br>        { field: 'name', title: '名称', align: 'center', width: 180 },<br>    ]],<br>    done(){<br>        layui.dropMenu.render({<br>             ele:".rowmoreBtn",<br>             data:[<br>		     {title:'查看', icon:'layui-icon-set', event:'viewinfo'},<br>		     {title:'删除', icon:'layui-icon-delete', event:'delete'},<br>                     {title:'新建订单', icon:'layui-icon-add-circle', event:'neworder'},<br>                     {title:'放入回收站', icon:'layui-icon-cart', event:'recycle'},<br>             ]<br>        });<br>    }<br>});</pre>效果图
       <br>
       <img src="/upload/2020_12/45030216_1607156978255_64844.png"> 
       <br>
       <img src="/upload/2020_12/45030216_1607156991307_9363.png"> 
       <br>
       <img src="/upload/2020_12/45030216_1607157000014_69250.png"> 
      </div> 
     </div> 
     <div class="layui-card fly-extend-doc"> 
      <div class="layui-card-header"> 
       <h3 class="layui-inline layui-this">下载</h3> 
      </div> 
      <div class="layui-card-body detail-body layui-text"> 
       <div class="layui-btn-container"> <a href="//cdn.layui.com/extend/45030216_1610330290687_18831.zip" target="_blank" class="layui-btn layui-btn-lg layui-btn-primary"> 立即下载 </a> <a href="/fkdexq/LayUI.dropMenu" target="_blank" class="layui-btn layui-btn-lg layui-btn-primary layui-border-red"> 去码云下载 </a> 
        <blockquote class="layui-elem-quote">
          该扩展组件由第三方用户主动投递，并由其自身进行维护，本站仅做收集。 
        </blockquote> 
       </div> 
      </div> 
     </div> 
    </div> 
   </div>
  </div>
  <div class="fly-footer"> 
   <p>Copyright © 2021 <a href="/index.html">layui.itmtr.cn</a> MIT Licensed</p>
  </div>
  <script src="/layui/dist/layui.js"></script>
  <script>// common</script>

 </body>
<script src="/common/common.js"></script>
</html>